<template>
	<el-dialog v-model="dialogVisible" :title="isAdd ? '添加sku' : '编辑sku'" width="25%" :before-close="handleClose">
		<div style="font-size: 14px; line-height: 30px">
			<el-form :model="form" label-width="120px" :inline="true" ref="skuAddFormRef" :rules="rules">
				<el-form-item label="sku名称：" prop="name">
					<el-input v-model="form.name" placeholder="输入名称"></el-input>
				</el-form-item>

				<el-form-item label="库存：" prop="stock">
					<el-input v-model="form.stock" placeholder="输入库存"></el-input>
				</el-form-item>

				<el-form-item label="sku图片：" prop="image">
					<UploadBuild :file-code="'IMG'" :index="0" :fileUrl="form.image"
						@handleAvatarSuccess="handleAvatarSuccess"></UploadBuild>
				</el-form-item>

				<el-form-item label="供货价：" prop="supplyPrice">
					<el-input v-model="form.supplyPrice" placeholder="输入供货价"></el-input>
				</el-form-item>

				<el-form-item label="现价：" prop="presentPrice">
					<el-input v-model="form.presentPrice" placeholder="输入现价"></el-input>
				</el-form-item>

				<el-form-item label="原价：" prop="originalPrice">
					<el-input v-model="form.originalPrice" placeholder="输入原价"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="submit">提交</el-button>
				<el-button @click="handleClose">关闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, watch, reactive } from 'vue';
import { addLabel } from '/@/api/api';
import UploadBuild from '/@/components/upload/index.vue';

const form = ref({});
const skuAddFormRef = ref();
const loading = ref(false);
const props = defineProps({
	// 列表内容
	dialogVisible: {
		type: Boolean,
		default: () => false,
	},
	row: {
		type: Object,
		default: () => { },
	},
	isAdd: {
		type: Boolean,
		default: () => true,
	},
	index: {
		type: Number,
		default: () => 0,
	},
});

const dialogVisible = ref(false);

const rules = reactive({
	name: [{ required: true, message: '请输入sku名称', trigger: 'blur' }],
	stock: [{ required: true, message: '请输入库存数量', trigger: 'blur' }],
	image: [{ required: true, message: '请上传sku图片', trigger: 'blur' }],
	presentPrice: [
		{ required: true, message: '请输入现价', trigger: 'blur' },
		{
			required: true,
			pattern:
				/^(([1-9]\d*|[0]{1,1})|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/,
			message: "请输入大于0的数",
		},
	],
	originalPrice: [
		{ required: true, message: '请输入原价', trigger: 'blur' },
		{
			required: true,
			pattern:
				/^(([1-9]\d*|[0]{1,1})|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/,
			message: "请输入大于0的数",
		},
	],
	supplyPrice: [
		{ required: true, message: '请输入供货价', trigger: 'blur' },
		{
			required: true,
			pattern:
				/^(([1-9]\d*|[0]{1,1})|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/,
			message: "请输入大于0的数",
		},
	],
});

watch(
	() => props.dialogVisible,
	(val) => {
		dialogVisible.value = val;
		if (val) {
			if (!props.isAdd) {
				form.value = JSON.parse(JSON.stringify(props.row || {}));
			}
		}
	}
);

function handleAvatarSuccess({ url, index }) {
	form.value.image = url;
}

const emit = defineEmits(['handleClose', 'submit']);

function submit() {
	if (skuAddFormRef?.value?.validate) {
		skuAddFormRef.value.validate((valid, fields) => {
			if (valid) {
				emit('submit', {
					...form.value,
					clickIndex: props.index,
				});
				emit('handleClose');
			} else {
				// console.log('error submit!', fields)
			}
		});
	}
}

function handleClose() {
	form.value = {};
	skuAddFormRef.value.resetFields();
	emit('handleClose');
}
</script>

<style>
.desc_label {
	width: 20px;
}
</style>
